<script setup>
import { reactive } from "vue";
import requests from "../../../utils/requests.js";

const data = reactive({
  pageData: {
    pageNum: 1, // 当前页码
    pageSize: 10, // 每页显示条数
    total: 0, // 数据总数
  },
  tableData: [], // 表格数据
  departmentMap: {}, // 部门映射表：{ id: name }
});

// 获取数据库中 department 表格的数据
const getTableData = () => {
  requests
      .post("department/page", {
        pageNum: data.pageData.pageNum,
        pageSize: data.pageData.pageSize,
      })
      .then((res) => {
        const list = res.data.list;

        // 构建部门映射表
        data.departmentMap = {};
        list.forEach((item) => {
          data.departmentMap[item.id] = item.name;
        });

        // 更新表格数据，并设置上级部门名称
        data.tableData = list.map((item) => ({
          ...item,
          parentDepartmentName: data.departmentMap[item.parentDepartmentId] || "无",
        }));

        // 更新分页总数
        data.pageData.total = res.data.total;
      })
      .catch((err) => {
        console.error("数据加载失败：", err);
      });
};

// 切换每页显示条数
const handleSizeChange = (newPageSize) => {
  data.pageData.pageSize = newPageSize;
  data.pageData.pageNum = 1; // 重置到第一页
  getTableData();
};

// 切换页码
const handleCurrentChange = (newPageNum) => {
  data.pageData.pageNum = newPageNum;
  getTableData();
};

// 编辑部门
const handleEdit = (row) => {
  console.log("编辑部门：", row);
  // TODO: 跳转到编辑页面或弹出编辑对话框
};

// 删除部门
const handleDelete = (id) => {
  console.log("删除部门 ID：", id);
  // TODO: 调用删除接口并刷新表格数据
  requests
      .delete(`department/${id}`)
      .then(() => {
        console.log("删除成功");
        getTableData(); // 刷新表格数据
      })
      .catch((err) => {
        console.error("删除失败：", err);
      });
};

// 初始化加载数据
getTableData();
</script>

<template>
  <el-card>
    <el-table
        :data="data.tableData"
        border
        style="width: 100%"
    >
      <el-table-column prop="id" label="序号"></el-table-column>
      <el-table-column prop="name" label="部门名称"></el-table-column>
      <el-table-column prop="parentDepartmentName" label="上级部门名称"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
        v-model:current-page="data.pageData.pageNum"
        v-model:page-size="data.pageData.pageSize"
        :total="data.pageData.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </el-card>
</template>



<style scoped lang="scss">
.el-card {
  margin: 20px;

  ::v-deep(.el-table .cell) {
    text-align: center; // 表格内容居中对齐
  }

  ::v-deep(.el-table th .cell) {
    text-align: center; // 表头内容居中对齐
  }
}

.el-pagination {
  margin: 20px;
}
</style>